<template>
  <view>
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">我发布的</block>
    </cu-custom>

    <view class="order" v-for="(res, index) in findlist" :key="res.id">
      <view class="top" @click="goGoodsDetatil(res.id)">
        <view class="left">
          <uni-text class="cuIcon-titles text-blue"></uni-text>
          <view class="store">{{ res.title }}</view>
          <u-icon
            name="arrow-right"
            color="rgb(203,203,203)"
            :size="26"
          ></u-icon>
        </view>
        <!-- <view class="right"> 
							<text class="text-blue">丢失时间：{{ getdate(res.create_time) }}</text>
						</view> -->
      </view>
      <view class="left1">
        <text class="text-blue">丢失时间：{{ getdate(res.create_time) }}</text>
      </view>

      <view class="item" @click="goGoodsDetatil(res.id)">
        <view class="left">
          <image
            :src="res.img_url ? res.img_url[0] : ''"
            mode="aspectFill"
          ></image>
        </view>
        <!--
						<view class="content">
							<view class="title u-line-2 text-bold">{{ res.imgdesc }}</view>
							 <view class="type">{{ res.imgdesc }}</view> 
							<view class="delivery-time">失主： {{ res.lostname }}</view>
						</view>
						 -->
      </view>
      <u-line color="#f1f1f1" margin="24rpx 0 15rpx 0"></u-line>
      <view class="bottom">
        <view>
          <!-- <view class="cu-avatar-group" style="padding-left: 24rpx;">
								<view class="cu-avatar round" v-for="(item,index) in avatar" :key="index"
									:style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
							</view> -->
          <text class="text-blue text-shadow">
            <text class="text-blue text-shadow" v-if="res.status == 0"
              >状态:待审核</text
            >
            <text class="text-blue text-shadow" v-if="res.status == 1"
              >状态:待认领</text
            >
            <text class="text-blue text-shadow" v-if="res.status == 2"
              >状态:已完成</text
            >
            <text class="text-blue text-shadow" v-if="res.status == 3"
              >状态:审核失败</text
            >
          </text>
        </view>

        <!-- <view class="btnBox">
          <view @click="getClaim(res.id, res.title)" class="evaluate btn"
            >认领</view
          >
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      findlist: [],
    };
  },
  methods: {
    async getFindList() {
      // console.log("发请求了");
      const res = await this.$httpTokenRequest({
        url: ":8022/o/v1/order/me",
        method: "get",
      });
      this.findlist = res.data.data.data;
      console.log(this.findlist);
    },
    getClaim(id) {
      console.log(id);
      uni.navigateTo({
        url: "/pages/Claim/index?id=" + id,
      });
    },
    // 导航到物品详情页
    goGoodsDetatil(id) {
      uni.navigateTo({
        url: "/pages/goods-detail/goods-detail?id=" + id,
      });
    },
    // goDetail(fl_id) {
    //   // console.log(fl_id)
    //   uni.navigateTo({
    //     url: "/pages/finds-detail/finds-detail?id=" + fl_id,
    //   });
    // },
    // 页面进去时执行
    onShow() {
      this.getFindList();
    },
    //时间转换
    getdate(strDate1) {
      const date = new Date(strDate1);
      var strDate = date.getFullYear() + "年";
      strDate += date.getMonth() + 1 + "月";
      strDate += date.getDate() + "号";
      // strDate += date.getHours()
      // strDate += date.getMinutes() + ':'
      // strDate += date.getSeconds()
      return strDate;
    },
  },
  // 注册组件
  onLoad() {
    this.getFindList();
  },
};
</script>

<style lang="scss">
.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;

				.progressBox {
					width: 150rpx;
					float: right;
				}
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 260rpx;
					height: 190rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 45rpx;
				}

				.type {
					margin: 6rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					-webkit-box-orient: vertical;
				}

				.delivery-time {
					color: #0081ff;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			} 
		}

		.bottom {
			line-height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btnBox {
				width: 150rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					line-height: 52rpx;
					width: 140rpx;
					border-radius: 12rpx;
					border: 2rpx solid $u-tips-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-tips-color;
				}

				.evaluate {
					color: $u-type-primary;
					border-color: $u-type-primary;
				}
			}
		}
	}
</style>
